import React from 'react';
import { Icon, Tools, Flex } from 'weaver-mobile';
import { toJS } from 'mobx';
import { inject, observer} from 'mobx-react';

import NoData from './NoData.js';
const getLabel = Tools.getLabel;

@inject('viewWorkplanStore')
@observer
export default class ItemCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {
  }
  
  onChange = (params) => {
    const { onRowClick } = this.props;
    typeof onRowClick === 'function' ? onRowClick(params.id,params.beginDate,params.beginTime,params.endDate,params.endTime) : onRowClick();
  }

  changeTimeToLabel = (time) => {
    time = parseInt(time, 10);
    let hour = Math.floor(time/60);
    let minute = time%60;
    if(hour === 0 && minute === 0){
      // return getLabel(390083,'正点');
      return minute + getLabel(15049,'分钟');
    }else{
      hour = parseInt(hour,10) === 0 ? '' : hour + getLabel(391,'小时');
      minute = parseInt(minute,10) === 0 ? '' : minute + getLabel(15049,'分钟');
      return hour + minute;
    }
  }
  
  changeBodybgColor = () => {
    document.body.style.backgroundColor = '#ffffff';
  }

  render(){
    function tc(d) {
      function zc(c, i) {
          var d = "666666888888aaaaaabbbbbbdddddda32929cc3333d96666e69999f0c2c2b1365fdd4477e67399eea2bbf5c7d67a367a994499b373b3cca2cce1c7e15229a36633cc8c66d9b399e6d1c2f029527a336699668cb399b3ccc2d1e12952a33366cc668cd999b3e6c2d1f01b887a22aa9959bfb391d5ccbde6e128754e32926265ad8999c9b1c2dfd00d78131096184cb05288cb8cb8e0ba52880066aa008cbf40b3d580d1e6b388880eaaaa11bfbf4dd5d588e6e6b8ab8b00d6ae00e0c240ebd780f3e7b3be6d00ee8800f2a640f7c480fadcb3b1440edd5511e6804deeaa88f5ccb8865a5aa87070be9494d4b8b8e5d4d47057708c6d8ca992a9c6b6c6ddd3dd4e5d6c6274878997a5b1bac3d0d6db5a69867083a894a2beb8c1d4d4dae54a716c5c8d8785aaa5aec6c3cedddb6e6e41898951a7a77dc4c4a8dcdccb8d6f47b08b59c4a883d8c5ace7dcce";
          return "#" + d.substring(c * 30 + i * 6, c * 30 + (i + 1) * 6);
      }
      var c = d !== null && d !== undefined ? d : 1;
      return [zc(c, 0), zc(c, 1), zc(c, 2), zc(c, 3)];
    }

    const conditions = toJS(this.props.datas);
    // conditions && conditions.length ? this.changeBodybgColor() : '';
    return (  
        conditions ? conditions.length === 0 ? <NoData message={getLabel(386600,'当天无日程安排')} /> : conditions && conditions.map((item,key) => {
        let h = 79*window.getThemeVars()['hd'];
        let color = item.color;
        item.address && (h=100*window.getThemeVars()['hd'])
        item.planName && (item.planName = item.planName.replace(/<\/?br>/g, ' '));
        item.name && (item.name = item.name.replace(/<\/?br>/g, ' '));
        window.screen.width < 360 && parseInt(item.remindTimesBeforeStart,10) > 60 && parseInt(item.remindTimesBeforeEnd,10) > 60 && (h=92*window.getThemeVars()['hd'])
        return (
          <Flex className="workplan-flex-item-card-container" key={item.id} params={item} parentprops={this.props}>
            <div className="item-card-container" key={key} onClick={() => {this.onChange(item)}}>
              <div className="item-card-header">
                <div className="header-item">
                  <div>
                    <span className="item-span">{item.beginTime || item.begintime}</span>
                    {item.urgentLevel && <label>{item.urgentLevel==="1" ? getLabel(154,'一般'): item.urgentLevel === "2" ?getLabel(25397,'重要') : item.urgentLevel === "3" ? getLabel(28090,'紧急') : ''} </label>}
                    {item.id.split('R').length>1 && <div style={{'verticalAlign':'sub'}}><Icon type={'repetition'} size='xxs' color='black'/></div>}
                  </div>
                  <div className="header-item-right"><span>{item.endTime || item.endtime}</span><label>{getLabel(405,'结束')}</label></div>
                </div>
              </div>
              {!((item.remindBeforeEnd ==='' || item.remindBeforeEnd==='0') && (item.remindBeforeStart ==='' || item.remindBeforeStart==='0')) ? <div className="item-card-content" style={{}}>
                <div className="content-item-left" style={{backgroundColor:color}}></div>
                <div className="content-item-right" >
                  <div className="content-item-right-span">
                    <span>{item.planName || item.name}</span> 
                  </div>
                  { item.remindTypeName === '' ? ''
                  :
                  <div className="content-item-right-list">
                    <div className="content-item-right-icon">
                      <Icon type={'blog-fill'} size='xxs' />
                    </div>
                    <div className="content-item-right-remind">
                      <ul>
                        <li>
                          {item.remindBeforeStart === '1'  && <label>{getLabel(19784,'开始前')}<span>{this.changeTimeToLabel(item.remindTimesBeforeStart)}</span></label>}
                          {item.remindBeforeEnd === '1'  && <label>{getLabel(19785,'结束前')}<span>{this.changeTimeToLabel(item.remindTimesBeforeEnd)}</span></label>}
                        </li>
                        <li>
                          {<label>{item.remindTypeName || getLabel(19782,'不提醒')}</label>}
                        </li> 
                      </ul> 
                    </div>
                  </div>}
                  {item.address &&
                    <div className="content-item-right-address">
                      <div className="content-item-right-icon">
                        <Icon type={'location'} size='xs' />
                      </div>
                      <div className="content-item-right-remind">
                      <ul>
                        <li>
                          <label>{item.address}</label>
                        </li> 
                      </ul> 
                    </div>
                    </div>
                  }
                </div>
              </div>
              :
              <div className="item-card-content" style={{height: 40*window.getThemeVars()['hd']}}>
                <div className="content-item-left" style={{backgroundColor:color}}></div>
                <div className="content-item-right content-item-right-padding">
                  <div className='content-item-right-name'>
                    <span>{item.planName || item.name}</span> 
                  </div>
                </div>
              </div>
              }
            </div>
          </Flex>
        )
      })
      : ""
    );  
  }
}

